<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Divider 分割线</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.el-divider.el-divider--horizontal {
    margin-top: 24px;
}
</style>
</head>
<body>
<div id="app" class="">
	<div class="h40"></div>
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">对不同段落的文本进行分割。</p>
	<div>
		<span>我今晨坐在窗前，世界如同一个路人，停下，对我点点头，又走了。</span>
		<el-divider></el-divider>
		<span>小小的思绪是树叶的沙沙声；他们在我心里窃窃私语。</span>
	</div>
	
	<div class="h40"></div>
	<el-divider content-position="left">设置文案</el-divider><!-- =============================================================== -->
	<p class="desc">可以在分割线上自定义文本内容。</p>
	<div style="padding: 0 60px;">
		<span>你看不到你是什么，你看到的是你的影子。</span>
		
		<el-divider content-position="left">Rabindranath Tagore</el-divider>
		<span>我的愿望是愚蠢的，它们在你的歌声中呼喊，我的主人。让我听听。</span>
		
		<el-divider><el-icon><star-filled></star-filled></el-icon></el-divider>
		<span>我不能选择最好的。最好的选择了我。</span>
		
		<el-divider content-position="right">Rabindranath Tagore</el-divider>
	</div>
	
	<div class="h40"></div>
	<el-divider content-position="left">虚线</el-divider><!-- =============================================================== -->
	<p class="desc">您可以设置分隔符的样式。</p>
	<div style="padding: 0 60px;">
		<span>大海啊，你的语言是什么？</span>
		<el-divider border-style="dashed"></el-divider>
		<span>永恒疑问的语言。</span>
		<el-divider border-style="dotted"></el-divider>
		<span>天空啊，你的回答是什么？</span>
		<el-divider border-style="double"></el-divider>
		<span>永恒沉默的语言。</span>
	</div>
	
	<div class="h40"></div>
	<el-divider content-position="left">垂直分隔线</el-divider><!-- =============================================================== -->
	<div style="padding: 0 60px;">
		<span>Rain</span>
		<el-divider direction="vertical"></el-divider>
		<span>Home</span>
		<el-divider direction="vertical" border-style="dashed"></el-divider>
		<span>Grass</span>
	</div>
	
	
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>